<script setup>
import { ref, reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { saveAs } from 'file-saver'

const toolbar = ref('')
const workbar = ref('')
const isshow = ref(false)
const uploadedImageUrl = ref('')
const canvasRef = ref(null)

const config = reactive({
  content: '水印文字',
  font: {
    fontSize: 20,
    color: 'rgba(0, 0, 0, 0.6)',
  },
  zIndex: 0,
  rotate: -22,
  gap: [100, 100],
  offset: [0, 0],
})

const canvas = ref([
  { name: 'default', width: 500, height: 600 },
  { name: 'min', width: 300, height: 500 },
  { name: 'max', width: 1000, height: 700 },
])

const handleBeforeUpload = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    const img = new Image()
    img.onload = () => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      canvas.width = img.width
      canvas.height = img.height

      // 绘制图片
      ctx.drawImage(img, 0, 0)

      // 添加水印
      ctx.save()
      ctx.globalAlpha = 0.6
      ctx.font = `${config.font.fontSize}px Arial`
      ctx.fillStyle = config.font.color
      ctx.translate(img.width / 2, img.height / 2)
      ctx.rotate((config.rotate * Math.PI) / 180)
      ctx.fillText(config.content, config.offset[0], config.offset[1])
      ctx.restore()

      // 更新显示的图片
      uploadedImageUrl.value = canvas.toDataURL('image/png')
      isshow.value = true
      toolbar.value = 'first'
      workbar.value = 'first'
    }
    img.src = e.target.result
  }
  reader.readAsDataURL(file)
  return false
}
const saveImage = () => {
  return new Promise((resolve, reject) => {
    const link = document.createElement('a')
    link.href = uploadedImageUrl.value
    link.download = 'workmake.png'
    link.style.display = 'none'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    resolve()
  })
}
const openfile = async () => {
  if (isshow.value) {
    try {
      await ElMessageBox.confirm('是否下载当前图片？', '温馨提示', {
        confirmButtonText: '下载',
        cancelButtonText: '不用了，谢谢',
        type: 'warning',
      })
      await saveImage()
    } catch (error) {
    }
  }
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/*'
  input.onchange = (event) => {
    const file = event.target.files[0]
    if (file) {
      handleBeforeUpload(file)
    }
  }
  input.click()
}
const handleSuccess = (response, file, fileList) => {
  // 不需要处理
}
</script>

<template>
  <el-header class="edit_header">
    <div class="title">图片处理</div>
    <div class="controls">
      <el-button text :disabled="!isshow"><el-icon><DeleteFilled /></el-icon>删除</el-button>
      <el-button text :disabled="!isshow"><el-icon><RefreshLeft /></el-icon>撤销</el-button>
      <el-button text :disabled="!isshow"><el-icon><Checked /></el-icon>保存</el-button>
      <el-button text :disabled="!isshow"><el-icon><Download /></el-icon>下载</el-button>
      <el-button text :disabled="!isshow"><el-icon><View /></el-icon>预览</el-button>
      <el-button type="info" round :disabled="!isshow" @click="openfile"><el-icon><FolderOpened /></el-icon>打开图片</el-button>
    </div>
  </el-header>
  <div class="edit_box">
    <div class="edit_left">
      <el-tabs v-model="toolbar" class="tool_tabs">
        <el-tab-pane :disabled="!isshow" label="素材" name="first">
          <div class="list-wrapper">
            <div class="list-components">
              <div class="item">
                <img src="@/assets/Font.png" alt="文字" />
                <div class="item-desc">
                  <h3>文字</h3>
                  <p>点击创建</p>
                </div>
              </div>

              <div class="item">
                <img src="@/assets/Picture.png" alt="图片" />
                <div class="item-desc">
                  <h3>图片</h3>
                  <p>点击创建</p>
                </div>
              </div>

              <div class="item">
                <img src="@/assets/QR_code.png" alt="二维码" />
                <div class="item-desc">
                  <h3>二维码</h3>
                  <p>点击创建</p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :disabled="!isshow" label="模板" name="mode">模板</el-tab-pane>
      </el-tabs>
    </div>
    <div class="edit_center">
      <div class="open_file" v-if="!isshow">
        <el-upload
            drag
            :before-upload="handleBeforeUpload"
            :on-success="handleSuccess"
            accept="image/*"
            :show-file-list="false"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            你可以拖拽图片至此页打开或 <em>点击这里</em>
          </div>
        </el-upload>
      </div>
      <div class="work" v-if="isshow" >
        <img :src="uploadedImageUrl" alt="示例图片" />
      </div>
    </div>
    <div class="edit_right">
      <el-tabs v-model="workbar" class="tool_tabs">
        <el-tab-pane :disabled="!isshow" label="水印" name="first">
          <el-form :model="config" label-position="top" label-width="50px">
            <el-form-item label="文字信息">
              <el-input v-model="config.content" />
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-color-picker v-model="config.font.color" show-alpha />
            </el-form-item>
            <el-form-item label="字体大小">
              <el-slider v-model="config.font.fontSize" :min="10" />
            </el-form-item>
            <el-form-item label="层级大小">
              <el-slider v-model="config.zIndex" />
            </el-form-item>
            <el-form-item label="旋转角度">
              <el-slider v-model="config.rotate" :min="-180" :max="180" />
            </el-form-item>
            <el-form-item label="字体间距">
              <el-space>
                <el-input-number v-model="config.gap[0]" controls-position="right" />
                <el-input-number v-model="config.gap[1]" controls-position="right" />
              </el-space>
            </el-form-item>
            <el-form-item label="字体偏移">
              <el-space>
                <el-input-number v-model="config.offset[0]" controls-position="right" />
                <el-input-number v-model="config.offset[1]" controls-position="right" />
              </el-space>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :disabled="!isshow" label="模板" name="element">组件</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped>
.edit_header{
  display: flex;
  line-height: 60px;
  border-bottom: 1px solid #eee;
}
.edit_header .title{
  width: 260px;
}
.edit_header .controls{
  flex: 1;
  text-align: right;
}
.el-button .el-icon{
  margin-right: 5px;
}
.el-button+.el-button{
  margin-left: 0;
}
.edit_box {
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
  flex: 1;
}

.edit_left {
  height: 100%;
  width: 280px;
}
.list-wrapper {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  padding: 0 8px;
}

.item {
  border-radius: 4px;
  height: 72px;
  width: auto;
  color: #33383e;
  align-items: center;
  display: flex;
  cursor: pointer;
  margin-top: 10px;
  background-color: #f6f7f9;
  padding-left: 12px;
  box-sizing: inherit;
}
.item h3 {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  margin-bottom: 6px;
  margin-top: 0;
  color: rgba(0, 0, 0, 0.85);
}
.item img{
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.item-desc{
  margin-top: 10px;
}
.item-desc p {
  color: #7f8792;
  font-size: 12px;
  line-height: 18px;
  padding: 0;
}
.edit_center{
  position: relative;
  display: flex;
  flex: auto;
  background-color: #eef2f8;
  justify-content: center;
  padding: 20px;
}
.edit_center .open_file{
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}
.el-upload-dragger{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.edit_center .work{
  margin-top: 40px;
  position: absolute;
}
.edit_center .work img{
  width: 100%;
}
.edit_right {
  width: 330px;
  border-left: 1px solid #eee;
}
.edit_right .el-form{
  padding: 20px 20px 0 20px;
}
:deep(.el-tabs__nav-scroll){
  display: flex;
  justify-content: center;
}


/*img {
  z-index: 10;
  width: 100%;
  max-width: 300px;
  position: relative;
}*/
</style>